<template>
  <div class="app">
    <div
      v-if="level > 1 && level != oldLevel"
      class="return"
      @click="toBack"
    ></div>
    <div ref="chartsRef" class="charts-ref"></div>
  </div>
</template>

<script setup name="MapCharts">
import * as echarts from 'echarts';
import { getMap } from '@/utils/maputil.js';
import mapBj from '@/assets/images/mapCharts/mapBj.jpg';
import { onMounted, ref, reactive, toRefs, nextTick } from 'vue';

const mapName = ref('青田');
const level = ref(1);
const oldLevel = ref(1);
const newMap = ref(null);
const chartsRef = ref(null);
const data = reactive({
  option: {
    // 提示浮窗样式
    tooltip: {
      show: false,
    },
    // 地图配置
    geo: {
      map: '青田',
      zoom: 1,
      left: '2%',
      right: '2%',
      top: '2%',
      bottom: '5%',
      label: {
        // 通常状态下的样式
        normal: {
          show: true,
          textStyle: {
            color: '#fff',
          },
        },
        // 鼠标放上去的样式
        emphasis: {
          textStyle: {
            color: '#fff',
          },
        },
      },
      // 地图区域的样式设置
      itemStyle: {
        normal: {
          borderColor: 'rgba(147, 235, 248, 1)',
          borderWidth: 1,
          areaColor: {
            image: mapBj, //
            repeat: 'repeat', // // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'
          },
          shadowColor: 'rgba(0, 0, 0, 0.5)',
          shadowOffsetX: 6,
          shadowOffsetY: 12,
          shadowBlur: 10,
        },
        // 鼠标放上去高亮的样式
        emphasis: {
          disabled: true,
          areaColor: {
            image: mapBj, //
            repeat: 'repeat', // // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'
          },
          borderWidth: 0,
        },
      },
    },
    series: [
      {
        type: 'scatter',
        coordinateSystem: 'geo',
        symbol:
          'image://',
        legendHoverLink: true,
        symbolSize: [80, 25],
        // 这里渲染标志里的内容以及样式
        label: {
          show: true,
          formatter(value) {
            return `${value.data.value[2]} 分`;
          },
          color: '#fff',
        },
        // 标志的样式
        itemStyle: {
          normal: {
            shadowBlur: 2,
            shadowColor: 'D8BC37',
          },
        },
        // 数据格式，其中name,value是必要的，value的前两个值是数据点的经纬度，其他的数据格式可以自定义
        // 至于如何展示，完全是靠上面的formatter来自己定义的
        data: null,
        showEffectOn: 'render',
        rippleEffect: {
          brushType: 'stroke',
        },
        hoverAnimation: true,
        zlevel: 1,
      },
    ],
  },
  mapBus: {},
});
const { option, mapBus } = toRefs(data);
onMounted(() => {
  initCharts();
  nextTick(()=>{
    chartsRef.value.children[0].style.width = '100%';
    chartsRef.value.children[0].children[0].style.width = '100%';
  })
});
// 标签功能
const initCharts = () => {
  const charts = echarts.init(chartsRef.value);
  // 不传name默认会返回默认地图
  mapChange(mapName.value);
  // 注意这里是echarts的实例对象，而不是echarts组件本身。
  charts.on('click', (e) => {
    let name = e.name;
    if (getMap(name)[0] != mapName.value && newMap.value != name) {
      level.value++;
      mapChange(name);
    }
    // 重新渲染
    charts.setOption(option.value, true);
  });
  // 重新渲染
  charts.setOption(option.value, true);
};
const mapChange = (name) => {
  mapBus.value[level.value] = name;
  newMap.value = name;
  let mapName, mapJson;
  //区级判断过滤
  if (level.value == 2) {
    [mapName, mapJson] = getMap(mapBus.value[1]);
    let arr = mapJson.features;
    arr = arr.filter((item) => {
      return item.properties.name == name;
    });
    let obj = {
      type: 'FeatureCollection',
      features: arr,
    };
    mapJson = obj;
  } else {
    [mapName, mapJson] = getMap(name);
  }

  option.value.geo.map = mapName;
  // 地图注册，第一个参数的名字必须和option.geo.map一致
  echarts.registerMap(mapName, mapJson);
};
const toBack = () => {
  const charts = echarts.init(chartsRef.value);
  level.value--;
  mapChange(mapBus.value[level.value]);
  // 重新渲染
  charts.setOption(option.value, true);
};
</script>

<style lang="scss" scoped>
.app {
  width: 100%;
  height: 700px;
  position: relative;
}
.charts-ref {
  width: 100%;
  height: 700px;
}
.return {
  top: 0;
  position: absolute;
  width: 170px;
  height: 100px;
  background: url(../../../../assets/images/mapCharts/back.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index: 1000;
}
</style>
